<template>
  <div class="container">
    <div class="roster">
        <div class="fixed">
            <search @toQuery="toQuery" @clearQuery="_employees('pull')"></search>
            <ul class="filter-bar">
                <picker class="picker" @change="bindOrgPickerChange" v-model="orgName" :range="orgList" range-key="F_FullName">
                    <li>{{orgName || '所在公司'}}</li>
                </picker>
                <picker class="picker" @change="bindStatusPickerChange" v-model="value" :range="hasInsuranceStatus" range-key="name">
                    <li>{{hasInsuranceName || '商保状态'}}</li>
                </picker>
            </ul>
        </div>
      <div class="roster-list">
          <div class="roster-list-content">
              <li v-for="(item, index) in employeList" :key="index" @click="toRosterDetail(item)">
                  <div class="avater">
                      <img :src="avaterUrl" alt="">
                  </div>
                  <div class="right-content">
                      <div class="title">
                          <h3>{{item.F_EmpName}}/{{item.F_Sex}}</h3>
                          <h3 :class="{'gray': !isHasInsurance}" v-html="item.isHasInsurance? '在保': '退保'"></h3>
                      </div>
                      <p>{{item.F_IDNum}}</p>
                  </div>
              </li>
              <!-- <li class="active" @click="toRosterDetail">
                  <div class="avater">
                      <img :src="avaterUrl" alt="">
                  </div>
                  <div class="right-content">
                      <div class="title">
                          <h3>韩梅梅/女</h3>
                          <h3 class="gray">退保</h3>
                      </div>
                      <p>321345199098760987</p>
                  </div>
              </li> -->
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import search from '@/components/search'
import avaterUrl from 'static/image/avater.png'
import { employees, getOrganizeTree } from 'api/api'
import { hasInsuranceStatus } from 'common/utils/index'
export default {
    data () {
        return {
            avaterUrl,
            employeList: [],
            pageNum: 1,
            pageSize: 10,
            keyword: '',
            orgId: '',
            orgName: '',
            orgList: [],
            hasInsuranceStatus,
            hasInsurance: '-1',
            hasInsuranceName: '',
            hasMore: true
        }
    },
    components: {
        search
    },

    methods: {
        toQuery (val) {
            this.keyword = val
            wx.showLoading({
                title: '查询中'
            })
            this._employees('pull')
            wx.hideLoading()
        },
        toRosterDetail (item) {
            let info = JSON.stringify(item)
            wx.navigateTo({
                url: `/pages/center/rosterDetail?userInfo=${info}`
            })
        },
        _employees (type) {
            employees(this.pageSize, this.pageNum, this.keyword, this.orgId, '', this.hasInsurance)
                .then((res) => {
                    console.log(res)
                    if (type === 'pull') {
                        this.employeList = res.data.rows
                    } else {
                        this.employeList = this.employeList.concat(res.data.rows)
                    }
                })
        },
        _getSubOrganization () {
            getOrganizeTree()
                .then((res) => {
                    console.log(res)
                    this.orgList = res.data
                })
        },
        bindOrgPickerChange (e) {
            console.log(e)
            console.log(e.mp.detail.value)
            this.pageNum = 1
            let index = e.mp.detail.value
            this.orgId = this.orgList[index].F_Id
            this.orgName = this.orgList[index].F_FullName
            this._employees()
        },
        bindStatusPickerChange (e) {
            console.log(e)
            this.pageNum = 1
            let index = e.mp.detail.value
            this.hasInsurance = this.hasInsuranceStatus[index].value
            this.hasInsuranceName = this.hasInsuranceStatus[index].name
            this._employees('pull')
        }
    },
    async onReachBottom () {
        if (!this.hasMore) {
            return
        }
        this.pageNum += 1
        wx.showLoading({
            title: '加载中'
        })
        await this._employees()
        wx.hideLoading()
    },
    async onPullDownRefresh () {
        this.pageNum = 1
        wx.showLoading({
            title: '加载中'
        })
        await this._employees('pull')
        wx.stopPullDownRefresh()
        wx.hideLoading()
    },
    async onShow () {
        await this._getSubOrganization()
        this.hasInsurance = '-1'
        this.hasInsuranceName = ''
        this.orgId = ''
        this.orgName = ''
        await this._employees('pull')
    }
}
</script>

<style lang='stylus' scoped>
.roster
    width 750rpx
    padding-top 180rpx
    .fixed
        position fixed
        top 0
        width 100%
        z-index 1
        .filter-bar
            width 100%
            background #fff
            display flex
            height 90rpx
            line-height 90rpx
            .picker
                flex 1
            li
                text-align center
                background-image: url('')
                background-repeat no-repeat
                background-position:80% center
                white-space:nowrap
                overflow hidden
    .roster-list
        width 750rpx
        padding 15rpx 21rpx
        box-sizing border-box
        .roster-list-content
            width: 100%
            li
                border-radius 8rpx
                display flex
                padding 32rpx 38rpx 36rpx 26rpx
                background #fff
                margin-bottom 15rpx
                &.active
                    border 1rpx solid #5ba7fa
                .avater
                    width 138rpx
                    height 138rpx
                    border-radius 50%
                    margin-right 26rpx
                    img
                        width: 100%
                        height: 100%
                .right-content
                    flex: 1
                    .title
                        display flex
                        justify-content space-between
                        margin-top 5rpx
                        margin-bottom 20rpx
                        h3
                            font-size 32rpx
                            color #333
                            &.gray
                                color #999
                    p
                        line-height 40rpx
                        font-size 20rpx
                        color #666
</style>
